<template>
	<div class="pitChecked-box">
		<span
			v-for="item in buttonList"
			:class="typeIndex == item.value ? 'active' : ''"
			@click="handleButton(item.value)"
			:key="item.value"
			>{{ item.key }}
		</span>
	</div>
</template>
<script setup lang="ts" name="pitChecked">
import { ref } from "vue";
const buttonList = [
	{
		value: 0,
		key: "全部"
	},
	{
		value: 1,
		key: "井上"
	},
	{
		value: 2,
		key: "井下"
	}
];
const emit = defineEmits(["handleButton"]);
const typeIndex = ref(0);
const handleButton = (value: any) => {
	typeIndex.value = value;
	emit("handleButton", buttonList[value]);
};
</script>
<style scoped lang="less">
.pitChecked-box {
	display: flex;
	> span {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.2);
		color: #fff;
		font-family: PingFang SC;
		font-size: 12px;
		margin-left: 8px;
		cursor: pointer;
	}
	.active {
		background: rgba(0, 117, 255, 1);
	}
}
</style>
